<template>
	<view class="order-base-info">
		<u-card :margin="uCardMargin" padding="20" border-radius="20" box-shadow="0px 0px 10rpx rgba(0, 0, 0, 0.05)"
			:head-style="cardStyle" :body-style="cardStyle" :foot-style="cardStyle">
			<view slot="head" class="head">
				{{title}}
			</view>
			<view slot="body" class="body">
				<view class="store-name" v-if="isShowStoreName">{{orderBaseInfo.storeName}}</view>
				<view class="goods" v-for="(item, index) in orderBaseInfo.goodsInfo" :key="index">
					<view class="goods-image">
						<u-image :showLoading="true" :src="item.imageUrl" width="120rpx" height="120rpx"
							border-radius="8"></u-image>
					</view>
					<view class="name-spec">
						<view class="name">{{item.name}}</view>
						<view class="spec">{{item.spec}}</view>
					</view>
					<view class="price-num">
						<view class="price"><text class="money-sign">￥</text>{{item.price}}</view>
						<view class="num">x{{item.num}}</view>
					</view>
				</view>
				<template v-if="isShowRefundData">
					<view class="info">
						<text class="gray">退款原因</text>
						<view><text class="small">{{orderBaseInfo.refundReason}}</text></view>
					</view>
					<view class="info">
						<text class="gray">订单编号</text>
						<view @click="copyOrderNumber">
							<image :src="iconCopy" mode="aspectFill" class="copy"></image><text
								class="small">{{orderBaseInfo.out_trade_no}}</text>
						</view>
					</view>
				</template>
				<view class="info" v-if="isShowPackingFee && orderBaseInfo.packageFee">
					<text>包装费</text>
					<view><text class="money-sign">￥</text><text>{{orderBaseInfo.packageFee}}</text></view>
				</view>
				<view class="info" v-if="isShowDeliveryFee && orderBaseInfo.deliveryFee">
					<text>配送费</text>
					<view><text class="money-sign">￥</text><text>{{orderBaseInfo.deliveryFee}}</text></view>
				</view>
				<view class="info" v-if="orderCouponFlag && flag">
					<view class="coupon-label">
						<u-image :src="iconCoupon" width="15px" height="13px" class="coupon-image"></u-image>
						<text>优惠券</text>
					</view>
					<view>
						<view  v-if="CouponListNum != 0" style="display: inline-block;">
							<text v-if="reduce == 0" class="coupon-name" style="color: #999999;" @click="toSelectCoupons">有{{CouponListNum}}张优惠券待使用</text>
							<text v-else class="coupon-name" style="color: #FF7933;" @click="toSelectCoupons">优惠￥{{reduce}}</text>
						</view>	
						<view v-else class="coupon-name" style="color: #999999;display: inline-block;">当前暂无可用优惠券</view>
						<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
				</view>
				<view class="info" v-if="memberFlag && orderCouponFlag">
					<view class="coupon-label">
						<u-image :src="iconMember" width="15px" height="13px" class="coupon-image"></u-image>
						<text>{{level_name}}{{discountlist / 10}}折折扣</text>
					</view>
					<view>
						<view class="coupon-name" style="color: #F22120;display: inline-block;">-￥{{payMoney}}</view>
					</view>
				</view>
				<view class="info right" v-if="isShowTatalMoney">
					<view>合计：<text class="tatal-money">￥{{orderBaseInfo.totalMoney || ''}}</text></view>
				</view>
			</view>
			<view slot="foot" class="foot" v-if="isShowfoot" :class="{submit: type == 'submit'}">
				<template v-if="isShowNormalFoot">
					<!-- 优惠功能还没有，暂时隐藏 -->
					<view class="info" v-if="false">
						<text class="pay-discount-name">支付优惠：{{orderBaseInfo.payDiscountInfo.name}}</text>
						<view><text class="money-sign">-￥</text><text>{{orderBaseInfo.payDiscountInfo.price}}</text>
						</view>
					</view>
					<view class="info">
						<text>实付款</text>
						<view>
							<text class="goods-total"
								v-if="orderBaseInfo.goodsTotal">共{{orderBaseInfo.goodsTotal}}件商品</text>
							<text class="actual-payment"
								v-if="orderBaseInfo.actualPayment">￥{{orderBaseInfo.actualPayment}}</text>
						</view>
					</view>
				</template>
				<template v-if="isShowSubmitFoot && orderBaseInfo.actualPayment">
					<view class="row">
						<text class="actual-payment">小计：<text
								class="price">￥{{orderBaseInfo.actualPayment}}</text></text>
					</view>
				</template>
				<div class="btms-text" style="text-align: right;" v-if="orderFlag">
					<span v-if="rulelist.integral_expadd != 0 || rulelist.suffer_expadd != 0">支付完成将获得</span>
					<span v-if="rulelist.integral_expadd != 0">{{integralVal || 0}}个{{integral_name}} <span
							v-if="rulelist.suffer_expadd != 0">，</span></span>
					<span v-if="rulelist.suffer_expadd != 0">{{experienceVal || 0}}个经验值 </span>
				</div>
			</view>
		</u-card>
	</view>
</template>

<script>
	import iconCopy from '../statics/images/order/copy.png';
	import iconCoupon from '../statics/images/order/coupon.png';
	import iconMember from '../statics/images/order/member.png';
	import {
		sendHttp
	} from '../../request/http.js'
	import {
		regYuanToFen,
		regFenToYuan,
		roundHalfeven
	} from "@/aliInstallmentRate/aliRate.js"

	export default {
		name: 'orderBaseInfo',
		props: {
			orderID: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: 'normal'
			},
			uCardMargin: {
				type: String,
				default: '20rpx'
			},
			orderModel: {
				type: String,
				default: ''
			},
			orderBaseInfo: {
				type: Object,
				default: {}
			},
			orderFlag: {
				type: Boolean,
				default: false
			},
			orderCouponFlag: { // 是否显示优惠券功能
				type: Boolean,
				default: false
			},
			reduce:{
				type:Number,
				default: 0
			},
		},
		created() {
			this.integral_name = this.$store.integral_name;
			const extConfig = uni.getExtConfigSync() ? uni.getExtConfigSync() : {};
			if (extConfig.type != 1) {
				this.flag = false;
			}
			// console.log(this.$emit(flag));
			if (this.orderID) {

			} else if (process.env.NODE_ENV === 'development') {
				return
				this.orderBaseInfo = {
					//订单数据示例信息
					storeName: '千户零售餐饮连锁店', //店铺名称
					goodsInfo: [{
							imageUrl: 'http://dev.pay.mobxcx.com/uploads/3/1/image/202109021703024438d2248.jpg',
							name: '黑糖珍珠奶茶',
							spec: '大杯/去冰、三分糖',
							price: '29.9',
							num: '1'
						},
						{
							imageUrl: 'http://dev.pay.mobxcx.com/uploads/3/1/image/202109021703024438d2248.jpg',
							name: '黑糖珍珠奶茶',
							spec: '大杯/去冰、三分糖',
							price: '29.9',
							num: '1'
						}
					],
					packageFee: '2.00', //包装费
					deliveryFee: '3.00', //配送费
					totalMoney: '89.7', //合计
					payDiscountInfo: {
						name: '优惠券优惠', //支付优惠名称
						price: '5.00', //优惠金额
					},
					goodsTotal: '2', //商品总数
					actualPayment: '84.7' //实付款
				}
			}
			if(this.orderBaseInfo.packageFee == '0.00'){
				this.orderBaseInfo.packageFee = false
			}
		},
		computed: {
			//标题
			title() {
				if (this.type == 'refund') {
					return this.titleDictionary.refund
				} else if (this.orderModel == 'takeout') {
					return this.titleDictionary.takeout
				} else if (this.orderModel == 'pickup') {
					return this.titleDictionary.pickup
				} else {
					return '订单详情'
				}
			},
			//是否显示配送费
			isShowDeliveryFee() {
				// console.log(this.type != 'refund' && this.orderModel == 'takeout')
				return this.type != 'refund'
			},
			//是否显示包装费
			isShowPackingFee() {
				return this.type != 'refund'
			},
			//是否显示订单合计金额
			isShowTatalMoney() {
				return this.type != 'refund' && this.type != 'submit'
			},
			//是否显示底部
			isShowfoot() {
				return this.type != 'refund'
			},
			//是否显示常规情况下的底部
			isShowNormalFoot() {
				return this.type == 'normal'
			},
			//是否显示退款专用信息
			isShowRefundData() {
				return this.type == 'refund'
			},
			isShowSubmitFoot() {
				return this.type == 'submit'
			},
			//是否显示店铺名称
			isShowStoreName() {
				return this.type != 'refund'
			}
		},
		data() {
			return {
				iconCopy,
				iconCoupon,
				iconMember,
				titleDictionary: {
					takeout: '外卖订单',
					pickup: '自提订单',
					refund: '退款信息'
				},
				//支付宝小程序无法识别卡片的默认行内样式-内边距，设置为0，再在class样式里设置内边距。
				cardStyle: {
					padding: 0
				},
				rulelist: {},
				integralVal: "", // 积分
				experienceVal: "", // 经验值
				CouponListNum: 0 ,// 可用优惠券
				memberFlag:false, // vip折扣
				vipData:{},
				payMoney:0,
				discountlist:0,
				level_name:"",
				flag:true,
				integral_name:''
			}
		},
		watch: {
			orderBaseInfo(val) {
				if(val.packageFee == '0.00'){
					val.packageFee = false
				}
				const extConfig = uni.getExtConfigSync() ? uni.getExtConfigSync() : {};
				if (extConfig.type == 1) {
					this.getVipInTe(val);
					this.getviplist();
				}
			},
			reduce:{
				handler(newValue, oldValue) { //newValue 新的值，oldValue变化前的值
					let payMoney = regYuanToFen(this.payMoney,100),
					actualPayment = regYuanToFen(this.orderBaseInfo.actualPayment,100),
					newValues = regYuanToFen(newValue,100);
					let value = actualPayment - payMoney - newValues;
					let val = regFenToYuan(value);
					this.vipIntegralExperience(val)
				}
			}
			
		},
		methods: {
			// 优惠券查询
			getCouponList(money) {
				sendHttp("privateSphere.getCouponList", {
					money
				}).then(res => {
					if(res.data){
						let arr = [];
						arr = Object.keys(res.data);
						this.CouponListNum = arr.length;
					}else {
						this.CouponListNum = 0
					}
				})
			},
			//复制订单编号
			copyOrderNumber() {
				uni.setClipboardData({
					data: this.orderBaseInfo.out_trade_no,
					success: () => {
						uni.showToast({
							title: '订单编号已复制！',
							icon: 'none'
						})
					}
				});
			},
			// 经验积分
			vipIntegralExperience(val){
				this.integralVal = "";
				this.experienceVal = "";
				if (val >= 0.01) {
					if (val >= this.rulelist.integral_expense) {
						let int = Math.floor(val / this.rulelist.integral_expense);
						let num = Math.trunc(int)
						this.integralVal = Math.floor(num * this.rulelist.integral_expadd)
					}
					if (val >= this.rulelist.suffer_expense) {
						let int = Math.floor(val / this.rulelist.suffer_expense);
						let num = Math.trunc(int)
						this.experienceVal = Math.floor(num * this.rulelist.suffer_expadd)
					}
				}
			},
			// 获取消费积分
			getVipInTe(e) {
				sendHttp("privateSphere.getVipInTe", {
					// #ifdef MP-WEIXIN
					vip_type: 1,
					// #endif
					// #ifdef MP-ALIPAY
					vip_type: 2,
					// #endif
				}).then(res => {
					this.rulelist = res.data;
					this.vipIntegralExperience(e.totalMoney);
					// e.totalMoney
				})
			},
			// 跳转优惠券选择页面
			toSelectCoupons(){
				this.$emit('toSelectCoupons');
				
				return
				if(this.orderCouponFlag){
					uni.navigateTo({
						url: `/privateSphere/coupons/selectCoupons/selectCoupons?money=${this.orderBaseInfo.actualPayment}`
					})
				}else {
					
				}
				
			},
			// 获取vip余额
			getviplist() {
				sendHttp("privateSphere.getVipInfo", {
					// #ifdef MP-WEIXIN
					vip_type: 1,
					// #endif
					// #ifdef MP-ALIPAY
					vip_type: 2
					// #endif
				}).then(res => {
					if (res.code == "000000") {
						this.vipData = res.data.vip_grade_v1;
						this.discountlist = res.data.vip_grade_v1.current_level.level_discount;
						this.level_name = res.data.vip_grade_v1.current_level.level_name;
						let payMoneys = this.orderBaseInfo.actualPayment;
						if(this.discountlist){
							this.memberFlag = true;
							sendHttp("privateSphere.getCalculateDiscount",{
								money:payMoneys,
								discount:this.discountlist
							}).then(res => {
								this.payMoney = res.preferential_money;
								this.getCouponList(res.money);
								if(this.orderCouponFlag){
									this.vipIntegralExperience(res.money);
								}
							})
						}else {
							this.memberFlag = false;
							this.getCouponList(payMoneys);
							// this.vipIntegralExperience(payMoneys);
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-base-info {

		.head,
		.body,
		.foot {
			font-size: 28rpx;
			color: #333333;
			padding: 20rpx;
		}

		.body {
			.store-name {
				color: #666666;
				padding-bottom: 24rpx;
			}

			.goods {
				margin-bottom: 36rpx;
				display: flex;

				.goods-image,
				.price-num {
					flex-shrink: 0;
				}

				.goods-image {
					width: 120rpx;
					margin-right: 20rpx;
				}

				.name-spec {
					width: 380rpx;
					margin-right: 20rpx;
					padding: 14rpx 0;

					.name,
					.spec {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 100%;
					}

					.name {
						margin-bottom: 20rpx;
					}

					.spec {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.price-num {
					flex-grow: 1;
					text-align: right;
					padding: 14rpx 0;

					.price {
						margin-bottom: 20rpx;
						font-weight: 600;
					}

					.num {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			.tatal-money {
				font-size: 32rpx;
				font-weight: 600;
			}

			.info {
				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.money-sign {
			font-size: 24rpx;
		}

		.info {
			display: flex;
			justify-content: space-between;
			margin-bottom: 28rpx;

			.gray {
				color: #999999;
				font-size: 24rpx;
			}

			.small {
				font-size: 24rpx;
			}

			.copy {
				width: 26rpx;
				height: 26rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}

			&.right {
				justify-content: flex-end;
			}

			.coupon-label {
				display: flex;
				line-height: 26rpx;

				.coupon-image {
					margin-right: 10rpx;
				}
			}

			.coupon-name {
				font-size: 24rpx;
				margin-right: 6rpx;
			}
		}

		.foot {
			padding: 20rpx;

			.info {
				margin-bottom: 20rpx;

				.pay-discount-name {
					font-size: 24rpx;
					color: #999999;
				}

				.goods-total {
					font-size: 24rpx;
					margin-right: 20rpx;
				}

				.actual-payment {
					font-size: 32rpx;
					font-weight: 600;
					color: #F22120;
				}

				&:last-child {
					margin-bottom: 0;
				}
			}

			&.submit {
				padding: 28rpx 20rpx;

				.row {
					display: flex;
					justify-content: flex-end;
				}

				.actual-payment {
					color: #333;
					font-size: 28rpx;

					.price {
						font-weight: 600;
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.btms-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
</style>
